<template>
    <div class="body_bg">
        <div>
            <nav-bar title="付款码" :show-back="true"/>
        </div>
        <div class="father_bg">
            <div class="child_bg">
                <div class="top_bg"></div>
                <div class="qrcode_bg">
                    <img src="../../img/qrcode.jpg" class="qrcode">
                    <div class="line"></div>
                    <div class="balance_div" @click="routerJump('/recharge')">
                        <div class="icon_div">
                            <img src="../../img/color_recharge.png" class="icon">
                            <div class="text">
                                <div style="font-size:125%;font-weight:bold">充值</div>
                                <div>
                                    <span>余额为：</span>
                                    <span style="color:rgb(238, 118, 0);font-size:120%">200</span>
                                </div>
                            </div>
                            <div style="float:left;margin-top:2%;margin-left:41%">
                                <img src="../../img/next.png" style="width:.5rem;height:.5rem">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'QRCode',
    components: {
        NavBar
    },
    methods: {
        // 路由跳转
        routerJump (path) {
            this.$router.push(path)
        }
    }
}
</script>
<style scoped>
.body_bg{width: 100%; height: 100%;}
.father_bg{width: 100%; height: 100%; background-color: #00B2EE;}
.child_bg{width: 6.4rem; height: 7.3rem; position: absolute; margin-top: 10%; margin-left: 7.5%; box-shadow: 5px 8px 10px 1px rgba(0, 0, 0, 0.2);}
.top_bg{width: 100%; height: 10%; background-color: #00dcff; border-radius: 8px 8px 0px 0px;}
.qrcode_bg{width: 100%; height: 90%; background-color: white; text-align: center;}
.qrcode{margin-top: 15%; width: 3.5rem; height: 3.5rem;}
.line {margin-top: 13%; width: 90%; margin-left: auto; margin-right: auto; height: 1px; border-top: 1px solid rgb(235, 234, 234); text-align: center;}
.balance_div{text-align: left; margin-left: 10%; margin-top: 3%; height: 20%;}
.icon {float: left; width: .7rem; height: .7rem;}
.text{float: left; margin-left: 3%;}
</style>
